<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文字转语音工具</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background-color: #f5f5f5;
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    .container {
      background-color: white;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      overflow: hidden;
      width: 600px;
      max-width: 100%;
    }
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      background-color: #008CBA;
      color: white;
      font-size: 24px;
    }
    
    .header h1 {
      margin: 0;
    }
    
    .options {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 10px;
      font-size: 18px;
    }
    
    label {
      display: inline-flex;
      align-items: center;
    }
    
    input[type="radio"], 
    input[type="checkbox"] {
      margin-right: 5px;
    }
    
    #text {
      padding: 20px;
      font-size: 18px;
      line-height: 1.5;
      border: none;
      resize: vertical;
      min-height: 200px;
    }
    
    .buttons {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
    }
    
    button {
      font-size: 18px;
      font-weight: bold;
      color: white;
      background-color: #008CBA;
      border: none;
      border-radius: 4px;
      padding: 10px 20px;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
    }
    
    button:hover {
      background-color: #006D9E;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>文字转语音工具</h1>
      <button id="downloadButton" disabled>下载音频</button>
    </div>
    <div class="options">
      <div>
        <label><input type="radio" name="language" value="zh-CN" checked>中文（中国）</label>
        <label><input type="radio" name="language" value="en-US">英语（美国）</label>
      </div>
      <div>
        <label><input type="checkbox" id="autoplayCheckbox" checked>自动播放音频</label>
      </div>
    </div>
    <textarea id="text" placeholder="请输入文字"></textarea>
    <div class="buttons">
      <button onclick="play()">播放</button>
      <button onclick="stop()">停止</button>
    </div>
  </div>
  
  <script>
    const downloadButton = document.getElementById('downloadButton');
    const textInput = document.getElementById('text');
    const languageRadios = document.querySelectorAll('input[name="language"]');
    const autoplayCheckbox = document.getElementById('autoplayCheckbox');
    let utterance = null;
    
    function play() {
      const text = textInput.value.trim();
      if (!text) {
        return;
      }
      const lang = getCheckedLanguage();
      // 创建 SpeechSynthesisUtterance 对象
      utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = lang;
      // 播放语音
      window.speechSynthesis.speak(utterance);
      // 自动播放时，激活“下载音频”按钮
      if (autoplayCheckbox.checked) {
        downloadButton.disabled = false;
      }
    }
    
    function stop() {
      if (utterance) {
        window.speechSynthesis.cancel(utterance);
      }
      // 停止播放时，禁用“下载音频”按钮
      downloadButton.disabled = true;
    }
    
    function getCheckedLanguage() {
      for (let radio of languageRadios) {
        if (radio.checked) {
          return radio.value;
        }
      }
      // 默认返回中文
      return 'zh-CN';
    }
    
    function downloadAudio() {
      if (!utterance) {
        return;
      }
      // 将语音转换为 Blob 对象，并创建 URL
      const blob = new Blob([new Uint8Array(utterance.audioBuffer)], {
        type: 'audio/mp3'
      });
      const url = URL.createObjectURL(blob);
      // 创建并模拟点击链接
      const link = document.createElement('a');
      link.download = 'speech.mp3';
      link.href = url;
      link.click();
      // 释放 URL 对象
      URL.revokeObjectURL(url);
    }
    
    downloadButton.addEventListener('click', downloadAudio);
  </script>
</body>
</html>
